iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Modern Web

Angular - 從零開始系列 第 16

Angular - 從零開始 - Day16 - @injectable 裝飾器與注入 HttpClient 服務元件

  • 分享至 

  • xImage
  •  

angular

什麼是裝飾器

從前面元件的練習可以看到在 app.component.ts 的檔案中會有一個 Component 的裝飾器,代表裝載著這個元件資料夾內對應的路徑。

而服務元件中的裝飾器叫做 @Injectable,用來注入需要的服務元件,像之前提到的Angular 筆記 - Service 服務元件的基本認識就有出現。

除了共用的程式邏輯會使用到服務元件外,串接 API 也會需要使用服務元件,而這個服務元件在 Angular 已經建立好,稱為 HttpClient

建立 HttpClientModule

首先先建立一個新的服務元件,名為 http.service.tsHttpClient 是從 HttpModule 來的,要同步注入到 app.module.tsimports 屬性中。

http

ngModule

  imports: [BrowserModule, HttpClientModule, AppRoutingModule, FormsModule]

注意:要加入在 BrowserModule 後方才能成功使用。

注入完成後,最上方的 import 也會自動完成注入,如此就可以準備開始使用 HttpClient 服務元件了。

注入 HttpClient 服務元件

分別要 import 跟在 建構式 (constructor) 裡面注入 HttpClient 服務元件,不用自己逐字輸入,輸入關鍵幾個字就可以看到相對應的選項,必且後面要注意有 import 字樣的,就是會自動 import 到上方區域,

import

完成後如下圖。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class HttpService {
  constructor(private http: HttpClient) {}
}

取得 API 資料

在練習 ngFor 的時候有下載這支 API 來取得資料。

基本的 httpClient 取得使用 get() 方法,只要在 constructor 內輸入,

this.http.get("url");

就會把資料抓回來,在 Angular 中的 AJAX 都是非同步的,也不可能在這邊讀到取得的結果結果,還要透過一個 Rxjs 幫忙訂閱 get() 之後的結果。滑鼠移到 http 上會看到提示資料類型是一個 Observable<object> 觀察者物件資料,所有的觀察者物件都要透過一個 subscribe() 方法來訂閱其結果,

this.http.get("url").subscribe();

比較簡單的做法是在 subscribe 會透過一個 callback function 取得結果,其 callback 參數就是我們要取回的值,裡面要做的事情就是,這個 data 為我們帶進來的參數值。

this.http.get("url").subscribe((res) => {
  this.data = res;
});

完整的程式碼會是這樣,

 constructor(private http: HttpClient) {
    this.http.get('url').subscribe((res) => {
      this.data = res;
      console.log(res);
    });
  }

上一篇
Angular - 從零開始 - Day15 - 結構型指令 ngFor
下一篇
Angular - 從零開始 - Day17 - 寫一個時鐘
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言